<template>
  <div class="av">
    <div class="map" id="map"></div>
    <div class="padding-top"></div>
    <div class="padding-left"></div>
    <div class="padding-right"></div>
    <div class="padding-bottom"></div>
    <div class="center"></div>

    <a-button-group class="btn-group">
      <a-button id="zoomtoswitzerland" @click="zoomtoswitzerland">Zoom to Switzerland</a-button>
      <a-button id="zoomtolausanne" @click="zoomtolausanne">Zoom to Lausanne</a-button>
      <a-button id="centerlausanne" @click="centerlausanne">Center on Lausanne</a-button>
    </a-button-group>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

import 'ol/ol.css';
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import View from 'ol/View';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
import { OSM, Vector as VectorSource } from 'ol/source';
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';

// import json from '@/assets/geojson/switzerland.geojson';

// const json = require('@/assets/geojson/switzerland.geojson');
@Component({
  components: {},
})
export default class AdvancedView extends Vue {
  private map: any = null;
  private source: any = new VectorSource({
    url: 'https://openlayers.org/en/latest/examples/data/geojson/switzerland.geojson',
    format: new GeoJSON(),
  });
  private style: any = new Style({
    fill: new Fill({
      color: 'rgba(255, 255, 255, 0.6)',
    }),
    stroke: new Stroke({
      color: '#319FD3',
      width: 1,
    }),
    image: new CircleStyle({
      radius: 5,
      fill: new Fill({
        color: 'rgba(255, 255, 255, 0.6)',
      }),
      stroke: new Stroke({
        color: '#319FD3',
        width: 1,
      }),
    }),
  });

  private vectorLayer: any = new VectorLayer({
    source: this.source,
    style: this.style,
  });

  private view = new View({
    center: [0, 0],
    zoom: 1,
  });

  public mounted() {
    // console.log(JSON.stringify(json))
    this.createMap();
  }
  public createMap() {
    this.map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
        this.vectorLayer,
      ],
      target: 'map',
      view: this.view,
    });
  }
  public zoomtoswitzerland() {
    let feature = this.source.getFeatures()[0];
    let polygon = feature.getGeometry();
    this.view.fit(polygon, { padding: [170, 50, 30, 150] });
  }

  public zoomtolausanne() {
    let feature = this.source.getFeatures()[1];
    let point = feature.getGeometry();
    this.view.fit(point, { padding: [170, 50, 30, 150], minResolution: 50 });
  }

  public centerlausanne() {
    let feature = this.source.getFeatures()[1];
    let point = feature.getGeometry();
    let size = this.map.getSize();
    this.view.centerOn(point.getCoordinates(), size, [570, 500]);
  }
}
</script>
<style lang="less" scoped>
.map {
  height: calc(100vh - 287px);
  width: 100%;
}

.av {
  position: relative;
  margin-bottom: 20px;
}
.map {
  height: calc(100vh - 287px);
  width: 100%;
}
.map /deep/ .ol-zoom {
  position: absolute;
  top: 178px;
  left: 158px;
}
.map /deep/ .ol-rotate {
  position: absolute;
  top: 178px;
  right: 58px;
}
.map .ol-attribution,
.map .ol-attribution.ol-uncollapsible {
  bottom: 30px;
  right: 50px;
}
.padding-top {
  position: absolute;
  top: 0;
  left: 0px;
  width: 100%;
  height: 170px;
  background: rgba(255, 255, 255, 0.5);
}
.padding-left {
  position: absolute;
  top: 170px;
  left: 0;
  width: 150px;
  height: calc(100vh - 447px);
  background: rgba(255, 255, 255, 0.5);
}
.padding-right {
  position: absolute;
  top: 170px;
  right: 0;
  width: 50px;
  height: calc(100vh - 447px);
  background: rgba(255, 255, 255, 0.5);
}
.padding-bottom {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 30px;
  background: rgba(255, 255, 255, 0.5);
}
.center {
  position: absolute;
  border: solid 1px black;
  top: 490px;
  left: 560px;
  width: 20px;
  height: 20px;
}
</style>